<template>
  <div class="test">
    <table border>
      <tr>
        <th>输入</th>
        <th>输出</th>
        <th>数据</th>
        <th><button @click="add()">+</button></th>
      </tr>
      <tr v-for="(item, index) in list" :key="index">
        <td>
          <select v-model="item.dayid">
            <option v-for="{ id, cnName } in dict" :key="id" :value="id">{{
              cnName
            }}</option>
          </select>
        </td>
        <td>
          <span>{{ item.dayname }}</span>
        </td>
        <td>
          <span>{{ item }}</span>
        </td>
        <td><button @click="remove(item)">-</button></td>
      </tr>
    </table>

    <div>
      <button @click="addMethod(-1)">-</button>
      <span>{{ num }}</span>
      <button @click="addMethod(1)">+</button>
    </div>
    <div ref="aaa">11111111111111</div>
  </div>
</template>

<script>
import { ref, reactive, computed, watchEffect, onMounted } from "vue";
export default {
  name: "test",
  props: {
    aaa: { default: 0, type: Number },
    type: { default: 0, type: Number }
  },
  setup(prop, ctx) {
    const dict = [
        { id: 1, cnName: "yi" },
        { id: 2, cnName: "er" },
        { id: 3, cnName: "san" },
        { id: 4, cnName: "si" },
        { id: 5, cnName: "wu" },
        { id: 6, cnName: "liu" }
      ],
      list = reactive([]),
      add = () => {
        const item = reactive({
          dayid: 0,
          dayname: computed(() => {
            const { dayid } = item;
            return (dict.find(({ id }) => id === dayid) || { cnName: "未知" })
              .cnName;
          })
        });
        list.push(item);
      },
      remove = row => {
        const index = list.indexOf(row);
        list.splice(index, 1);
      },
      aaa = ref(10),
      num = ref(10);

    onMounted(a => {
      console.log(aaa.value);
    });
    watchEffect(() => {
      document.title = `当前规则----${list.length}`;
    });
    return {
      dict,
      list,
      add,
      remove,
      aaa,
      num,
      addMethod: step => {
        num.value += step * 1;
      }
    };
  }
};
</script>
